<template>
  <el-avatar :src="src">
    <el-image class="avatar" :src="avatar">
      <span slot="error" class="i-nickname">{{ defaultNickname }}</span>
    </el-image>
  </el-avatar>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: '',
    },
    uid: {
      type: [Number, String],
      default: 1,
    },
    nickname: {
      type: String,
      default: '',
    },
  },
  computed: {
    defaultNickname() {
      return this.nickname.slice(0, 2);
    },
    avatar() {
      const formatUid = this.uid.toString();
      let random = formatUid[formatUid.length - 1];
      if (random === '0' || random === '9') {
        random = 1;
      }
      return `./static/default_avatar/default_avatar_${random}.jpg`;
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar{
  width: 100%;
  height: 100%;
}
.i-nickname {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: bold;
}
</style>
